<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="author" content="wangbo">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- <link rel="stylesheet" type="text/css" href=""/> -->
	<title> 虚拟dom </title>
</head>

<body>
	<div id="app">

	</div>
	<script type="text/javascript" src="../js/react.development.js">    </script>
	<script type="text/javascript" src="../js/react-dom.development.js">    </script>
	<script type="text/javascript" src="../js/prop-types.js">    </script>
	<script type="text/javascript" src="../js/babel.min.js">    </script>
	<script type="text/babel">
/* 	react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的，而是给React自己使用，
	有了key属性后，就可以与组件建立了一种对应关系，简单说，react利用key来识别组件，他是一种身份标识，
	就像每个人有一个身份证来做辨识一样。每个key 对应一个组件，
*/
		class Test extends  React.Component {
			constructor(props) {
				super(props);
				this.state = {
					testArray: [
						{ text: '组件1', id: 'a' }, 
						{ text: '组件2', id: 'b' }
						// { text: '组件3', id: 'c' }, 
						// { text: '组件4', id: 'd' }
					]
				}
			}

			//修改state打乱顺序
			sort=()=> {
				this.setState({
					testArray: [
					{ text: '组件2', id: 'b' },{ text: '组件1', id: 'a' } 
					// { text: '组件4', id: 'd' }
					]
				})
			}

			render() {
				const { testArray } = this.state
				return (
					<div>
						<div>不指定key属性</div>
						<ul>
							{
								testArray.map((item,i) => {
									return <li key={i}><span>{item.text}</span><input /></li>
								})
							}
						</ul>
						<div>指定key属性</div>
						<ul>
							{
								testArray.map((item) => {
									return <li key={item.id}><span>{item.text}</span><input /></li>
								})
							}
						</ul>
						<button onClick={this.sort}>打乱排序</button>
					</div>
				)
			}
		}
		ReactDOM.render(<Test />, document.getElementById("app"));

	</script>
</body>

</html>